<template>
  <!-- <div class="commmentList" :style="{paddingBottom: pulledBottom? '600rpx': '0'}"> -->
  <div class="commmentList">
    <div class="commentCell" v-for="(itemCell, indexCell) in commentData" :key="indexCell"  @click.stop.prevent="operateCommmentInit" @touchstart="operateCommmentInit">
      <div class="cellLeft" id="indexCell">
        <div class="cellIcon">
          <img :src="itemCell.avatarUrl" lazy-load>
        </div>
      </div>
      <div class="cellRight">
        <div class="cellName" @click.stop.prevent="goToTaskParticulars(itemCell)">{{itemCell.nickName}}</div>
        <div class="cellTime">{{itemCell.create_time}}·已交作业{{itemCell.sign_in}}次</div>
        <div class="cellContent" v-for="(itemContent, indexContent) in itemCell.content" :key="indexContent">
          <div class="contentText" v-if="itemContent.status === 0">{{itemContent.content}}</div>
          <div class="contentMedia" v-if="itemContent.status === 1 && itemContent.state === 0">
            <scroll-view class="mediaList" scroll-x style="width: auto;overflow:hidden;transform:translateZ(1px)">
              <div class="mediaCell" v-for="(itemMedia, indexMedia) in itemContent.content" :key="indexMedia" 
                :style="{'background-image' : itemMedia.status === 10? 'url(http://mobuz-mp.cdn.bcebos.com/matter%2Fvideo_capture_square%402x.png)': 'url('+ itemMedia.content +')'}" 
                @click="previewImageList(itemMedia, itemContent.content)">
                  <div class="videoBtn" v-if="itemMedia.status === 10">
                    <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fvideo_play%402x.png" lazy-load>
                  </div> 
              </div>
            </scroll-view>
          </div>
          <div class="contentVideo" v-if="itemContent.status === 1 && itemContent.state === 1">
            <div class="videoBox" v-for="(itemMedia, indexMedia) in itemContent.content" :key="indexMedia" @click="transmitMovies(itemMedia)">
              <!-- <video v-if="itemMedia.play === 1"        
                :id="'cVideo-'+indexContent+'-'+indexMedia" 
                :src="itemMedia.url" 
                controls objectFit="fill"></video> -->
              <!-- <img :src="itemMedia.content" mode="aspectFill" @click="playCVideo(itemMedia, ('cVideo-'+indexContent+'-'+indexMedia))"> -->
              <!-- <img :src="itemMedia.content" mode="aspectFill"> -->
              <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fvideo_capture%402x.png" mode="aspectFill">
              <div class="videoBtn">
                <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fvideo_play%402x.png" lazy-load>
              </div>   
            </div>
          </div>
          <div class="contentAudio" v-if="itemContent.status === 2">
            <!-- <audio name="" :src="itemContent.content" controls="true"></audio> -->
            <audioModule :audioData="itemContent" @audioeNotice="audioeMeans"></audioModule>
          </div> 
        </div>
        <div class="cellDiscuss">
          <div class="discussButton" @click.stop.prevent="operateCommmentDiscuss(itemCell.job_id, indexCell)">
            <div class="discussIcon">
              <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fcomments%402x.png" lazy-load>
            </div>
            <div class="discussText">评论</div>
          </div>
          <div class="opinionButton" @click.stop.prevent="operateCommmentOpinion(itemCell, indexCell)" v-if="superuserFlag === '1'">
            <div class="opinionIcon">
              <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fcomment%402x.png" lazy-load>
            </div>
            <div class="opinionText">点评</div>
          </div>
          <!-- <div class="shareButton" @click.stop.prevent="operateCommmentShare(itemCell)">
            <div class="shareIcon">
              <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fshare%402x.png" lazy-load>
            </div>
            <div class="shareText">分享</div>
          </div> -->
          <div class="teacherReviews" v-if="itemCell.teach" @click.stop.prevent="operateOpinionReply(itemCell, indexCell)">
            <span class="teacherName">{{itemCell.teacher_name}}</span>点评：<span class="reviewsText">{{itemCell.teach}}</span>
          </div>
          <div class="commentContent" v-if="itemCell.comment.length !== 0">
            <div class="commentLine" v-for="(itemLine, indexLine) in itemCell.comment" :key="indexLine" @click.stop.prevent="operateCommmentReply(itemLine, indexCell)">
              <div class="discussLine" v-if="itemLine.to_uid === itemLine.from_id">
                <span>{{itemLine.to_name}}：</span>{{itemLine.back_comment}}
              </div>
              <div class="replyLine" v-if="itemLine.to_uid !== itemLine.from_id">
                <span>{{itemLine.to_name}} </span>回复<span>{{itemLine.from_name}}：</span>{{itemLine.back_comment}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="commentLine" style="height: 70rpx"></div>
    <div class="commentJob" v-if="jobBtnFlag === '1'">
      <form @submit="goToCommentJob($event)" report-submit>
        <button formType="submit" class="form-btn">
          <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fsubmit_homework%402x.png" lazy-load>
        </button>
      </form>
    </div>
    <!--  :style="{top: (keyboardHeight) + 'rpx', display: spotlight? 'flex': 'none'}" -->
    <!-- <div class="commentRelease" v-if="showField" id="commentRelease" :style="{top: (keyboardHeight) + 'rpx'}"> -->

    <div class="commentRelease" v-if="showField" id="commentRelease">

      <!-- <textarea  class="text"
        placeholder-class="input_null" 
        fixed="true" 
        maxlength="-1" 
        show-confirm-bar="false" 
        cursor-spacing="15" 
        auto-height="false" 
        focus="false"
        :placeholder="releaseText" 
        v-model="commmentText" @confirm="operateCommmentPublish"></textarea> -->
      <!-- :focus="spotlight" adjust-position="false" -->
      <input class="text"
        placeholder-class="input_null"  
        maxlength="-1"
        cursor-spacing="10"
        :focus="spotlight"
        adjust-position="false"
        :placeholder="releaseText" 
        v-model="commmentText" @confirm="operateCommmentPublish" @focus="monitorCommmentFocus($event)" @blur="monitorCommmentBlur">   
      <div class="submit" @click.stop.prevent="operateCommmentPublish">发送</div>
    </div>

    <cover-view class="opinionModel" v-if="showOpinionModel">
      <cover-view class="opinionMask" @click.stop.prevent="showOpinionModel = !showOpinionModel"></cover-view>
      <cover-view class="opinionContent">
        <cover-view class="opinionTitle">已经点评过作业，是否要覆盖？</cover-view>
        <cover-view class="opinionSpace"></cover-view>
        <cover-view class="opinionDivide">
          <cover-view class="cancelDivide" @click.stop.prevent="initOpinionModal">取消</cover-view>
          <cover-view class="divideSpace"></cover-view>
          <cover-view class="ensureDivide" @click.stop.prevent="proceedOpinion">确定</cover-view>
        </cover-view>
      </cover-view>
    </cover-view>

  </div>
</template>

<script>
import {releaseCommmentContent, removeCommmentContent, judgeTaskRepetition, releaseCommmentOpinion, saveStudentFormId} from '@/config/api'
import audioModule from '@/components/audio'
import {showMessager, showPictureCard} from '@/config/wUtils'
// import {dateRegExp} from '@/config/mUtils'
import {remidnUserSocketBadge} from '@/config/vuexUtils'


export default {
  props: ['commentData', 'jobBtnFlag', 'hiddenInput'],
  components:{
    audioModule
  },
  data () {
    return {
      // 提示 文本
      releaseText: '',
      // 显示输入框
      showField: false,
      // 评论 文本
      commmentText: '',
      // 评论 状态  0 -- 评论   1 -- 回复   2 -- 点评
      commentStatus: 0,
      // 评论 数据包
      commentPacket: {},
      
      // 显示编辑作业按钮
      showJobBtn: true,
      // // 显示 分享model
      // showShareModel: false,

      // 文本 高度
      courseParticulars: '',
      // 作业 高度
      courseTaskHeight: '',
      // 作业 下标
      courseTaskIndex: null,
      // 作业 内容
      courseTaskItem: {},

      // 输入框 高度
      commentReleaseHeight: null,
      // 空间条 高度
      commentLineHeight: null,

      // 帖子 高度
      courseTopicHeight: null,


      // 进行滚动
      marchScroll: false,

      // 聚焦
      spotlight: false,
      // 显示 点评model
      showOpinionModel: false,
      // 超级用户 标识
      superuserFlag: '',

      // 键盘高度
      keyboardHeight: 0,
      // 输入框高度
      inputboxHeight: 0,

      // 拉高底部
      pulledBottom: false,

      // 滚动隐藏输入框
      scroollHideInput: true
    }
  },
  mounted () {
    let self = this;
    wx.getSystemInfo({
        success(res) {
          console.log(res, '获取系统信息...........')
          // 键盘高度   - keyboard + self.inputboxHeight
          self.keyboardHeight = res.windowHeight
          // self.keyboardHeight = res.screenHeight - res.windowHeight
        }
    });
    // 超级用户 标识
    self.superuserFlag = wx.getStorageSync('super_user')
    console.log(wx.getStorageSync('super_user'), '............super_user')
  },
  watch: {
    showField: {
        handler(val){
            let self = this
            console.log(val," 深度监听 .....showField", self.spotlight)
            self.$nextTick(() => {
              if (val) {
                
                // 滚动隐藏输入框
                self.scroollHideInput = false    
                self.courseParticulars = null
                wx.createSelectorQuery().select('#courseParticulars')
                  .boundingClientRect(function (rect) {
                    console.log(rect, '...........................全部节点 文本 高度')
                    if (rect) {
                      // 文本 高度
                      self.courseParticulars = rect.height
                      self.courseTaskHeight = null
                    }
                    

                    // wx.createSelectorQuery().select('#courseTopic')
                    //   .boundingClientRect(function (rect) {
                    //     console.log(rect, '..........帖子节点')
                    //     // 帖子 高度
                    //     self.courseTopicHeight = rect.height
                    // }).exec()
                    // wx.createSelectorQuery().select('#commentRelease')
                    //   .boundingClientRect(function (rect) {
                    //     console.log(rect, '..........输入框')
                    //     // 输入框 高
                    //     self.commentReleaseHeight = rect.bottom - rect.height
                    // }).exec()

                    wx.createSelectorQuery().selectAll('.commentCell')
                      .boundingClientRect((rects) => {
                        if (rects) {
                          if ((rects.length-1) === self.courseTaskIndex) {
                            // 拉高底部
                            self.pulledBottom = true
                          }
                          rects.forEach(function(rect, index){
                            if (index > self.courseTaskIndex) {
                              // 作业 高度
                              self.courseTaskHeight += (rect.height-0)
                              console.log(rect.height, '..........', index, self.courseTaskIndex)
                            }
                            // if (index <= self.courseTaskIndex) {
                            //   // 作业 高度
                            //   self.courseTaskHeight += (rect.height-0)
                            //   console.log(rect.height, '..........', index, self.courseTaskIndex)
                            // }

                          })
                        
                        
                          wx.createSelectorQuery().select('#commentLine')
                            .boundingClientRect(function (rect) {
                              console.log(rect, '..........commentLine')
                              if (rect) {
                                // 空间条 高度
                                self.commentLineHeight =  rect.height
                              }
                          }).exec()

                          // let sroll_top = self.courseTopicHeight + (self.courseTaskHeight-0)-self.commentReleaseHeight
                          // console.log(self.courseTopicHeight, self.courseTaskHeight, self.commentReleaseHeight, sroll_top, '.........................sroll_top')
                          // wx.pageScrollTo({
                          //   scrollTop: sroll_top,
                          //   duration: 50
                          // })
                          // setTimeout(() => {
                          //   // 聚焦
                          //   self.spotlight = true
                          // }, 10)

                          // 显示输入框
                          // self.showField = true
                          // // 进行滚动
                          // self.marchScroll = true

                          // setTimeout(async () => {
                            
                        
                          let sroll_top = null
                          wx.createSelectorQuery().select('#commentRelease')
                            .boundingClientRect(function (rect) {
                              console.log(rect, '..........self.commentReleaseHeight')
                              if (rect) {
                                // 输入框高度
                                self.inputboxHeight = rect.height
                                sroll_top = null
                                if ((rects.length-1) === self.courseTaskIndex) {
                                  // 输入框 高度
                                  self.commentReleaseHeight = 0
                                } else {
                                  // 输入框 高度
                                  self.commentReleaseHeight = rect.bottom  - rect.height + self.commentLineHeight 
                                }

                                sroll_top = self.courseParticulars - (self.courseTaskHeight-0) - self.commentReleaseHeight
                                console.log(rects.length , self.courseTaskIndex, ((rects.length-1) === self.courseTaskIndex),'..............')
                                console.log(self.courseTaskIndex, self.courseParticulars, self.courseTaskHeight , sroll_top, self.commentReleaseHeight, self.commentLineHeight, '.........................')
                                
                                console.log('开始......', sroll_top)

                                wx.pageScrollTo({
                                  scrollTop: sroll_top,
                                  duration: 100
                                })

                                wx.hideKeyboard()
                                wx.getSystemInfo({
                                    success(res) {
                                      console.log(res, '获取系统信息')
                                      // 键盘高度   - keyboard + self.inputboxHeight
                                      self.keyboardHeight = res.windowHeight
                                    }
                                });
                                // 聚焦
                                self.spotlight = true
                        
                              }
                          }).exec()


                          // }, 500)
                        } 
                    }).exec()
                }).exec()
                // 滚动隐藏输入框
                self.scroollHideInput = true
              } else {
                console.log('............. 收起输入框', self.spotlight, self.showField)
                // // 操作评论 --- 初始化
                // self.operateCommmentInit()
                // 拉高底部
                self.pulledBottom = false
                // setTimeout(() => {
                //   console.log('............定时')
                //   // 聚焦
                //   self.spotlight = false
                //   wx.hideKeyboard()
                // }, 100)
              }
            })
        },
        deep:true
    },
    hiddenInput: {
        handler(val){
            console.log(val,"...深度监听.......hiddenInput", this.spotlight, this.showField)
            // this.$nextTick(() => {
            //   // if (this.showField) {
            //     setTimeout(() => {
                  // // 操作评论 --- 初始化
                  // this.operateCommmentInit()
                  // // 聚焦
                  // this.spotlight = false
                  // wx.hideKeyboard()
            //       console.log(this.spotlight, this.showField, '.........')
            //       // // 隐藏 输入框 触发的方法
            //       // this.textFieldMeans ()
            //     }, 500)
            //   // }
            // })
        },
        deep:true
    },
  },
  methods: {
    // 发布 评论 -- 内容
    async publishCommmentContent () {
      let self = this;
      console.log('...enter')
      wx.showNavigationBarLoading()
      let commmentInfo = await releaseCommmentContent(self.commentPacket.job_id, self.commentPacket.to_uid, self.commentPacket.from_id, self.commmentText)
      if (commmentInfo.status === 200) {
        self.$emit("commentNotice");
        // 操作评论 --- 初始化
        self.operateCommmentInit()
      }else{
        showMessager(commmentInfo.msg)
      }
      console.log(commmentInfo, '....评论内容')
      wx.hideNavigationBarLoading()
    },
    // 删除 评论 -- 内容
    async cancelCommmentContent (item) {
      let self = this;
      wx.showNavigationBarLoading()
      let commmentInfo = await removeCommmentContent(item.to_uid, item.comment_id)
      if (commmentInfo.status === 200) {
        self.$emit("commentNotice");
        showMessager('删除成功')
      }
      console.log(commmentInfo, '....评论内容')
      wx.hideNavigationBarLoading()
    },

    // 发布 评论 -- 点评
    async publishOpinion () {
      let self = this;
      // console.log(self.courseTaskItem, '.............点评')
      wx.showNavigationBarLoading()
      let commmentInfo = await releaseCommmentOpinion(self.commentPacket.job_id, self.commentPacket.to_uid,  self.commmentText)
      if (commmentInfo.status === 200) {
        self.$emit("commentNotice");
        // 操作评论 --- 初始化
        self.operateCommmentInit()
        
        remidnUserSocketBadge(self.courseTaskItem.student_id)
      }else{
        showMessager(commmentInfo.msg)
      }
      console.log(commmentInfo, '....点评内容')
      wx.hideNavigationBarLoading()
    },

    // 播放 视频
    transmitMovies (item) {
      let self = this;
      console.log('播放 视频', item)
      self.$emit("commentVideo", item);
    },
    // 展示 图片列表
    previewImageList(item, itemList) {
      let self = this;
      // 操作评论 --- 初始化
      self.operateCommmentInit()
      if (item.status === 11){
        let imageList = []
        itemList.forEach( (itemCell, index) => {
          console.log(itemCell, '......展示图片列表')
          if (itemCell.status === 11) {
            imageList.push(itemCell.content)
          }
        });
        showPictureCard(item.content, imageList)
      }else{
        // 播放 视频
        self.transmitMovies (item)
      }
    },
    // playCVideo(item, id){
    //   // let self = this;
    //   // self.commentData.forEach((itemComment, indexComment) => {
    //   //   itemComment.content.forEach((itemContent, indexContent) => {
    //   //     if (itemContent.status === 1) {
    //   //       itemContent.content.forEach((itemMedia, indexMedia) => {
    //   //         if (itemMedia.status === 10) {
    //   //           itemMedia.play = 0
    //   //         }
    //   //       } )
    //   //     }
    //   //   })  
    //   // })
    //   // item.play = 1
    //   // let cVideoContext = wx.createVideoContext(id)
    //   // setTimeout(() => {
    //   //   cVideoContext.play()
    //   // }, 500)
    // },
    // audio组件 触发的方法
    audioeMeans (item) {
      let self = this;
      self.$emit("audioeNotice", item);
      // // 初始化 多媒体
      // self.initMultimedia()
      // item.play = 1
      // console.log(item, '.........audio组件 触发的方法....')
    },
    // 隐藏 输入框 触发的方法
    textFieldMeans () {
      let self = this;
      self.$emit("textFieldNotice");
    },

    // 操作评论 --- 初始化
    operateCommmentInit () {
      console.log('操作评论 --- 初始化')
      let self = this;
      // 显示输入框
      self.showField = false
      // 聚焦
      self.spotlight = false
      // 评论 文本
      self.commmentText = ''
      // 评论 状态  0 -- 评论   1 -- 回复   2 -- 点评
      self.commentStatus = 0
      // 评论 数据包
      self.commentPacket = {} 
    },
    // 操作评论 --- 分享
    operateCommmentShare (item) {
      let self = this;
      console.log('操作评论 --- 分享', item)
      self.$emit("commentShare", item);
      // // 显示 分享model
      // self.showShareModel = true;
    },
    // 初始化 评论modal框
    initOpinionModal () {
      let self = this;
      // 显示 点评model
      self.showOpinionModel = false
      // 作业 内容
      self.courseTaskItem = {}
      // 作业 下标
      self.courseTaskIndex = null
    },
    // 进行评论
    proceedOpinion () {
      let self = this;
      // 显示 点评model
      self.showOpinionModel = false
      // 操作评论 --- 初始化
      self.operateCommmentInit()
      // 提示文本
      self.releaseText = '点评 '
      // 显示输入框
      self.showField = true
      // 评论 状态  0 -- 评论   1 -- 回复   2 -- 点评
      self.commentStatus = 2
      // 评论 数据包
      self.commentPacket = {
        job_id: self.courseTaskItem.job_id,
        to_uid: wx.getStorageSync('student_id')
      }
    },
    // 操作评论 --- 点评
    operateCommmentOpinion (item, index) {
      let self = this;
      if(self.showField){
        // 显示输入框
        self.showField = false
        return;
      }
      // 作业 内容
      self.courseTaskItem = item
      // 作业 下标
      self.courseTaskIndex = index
      if (item.teach) {
        // 显示 点评model
        self.showOpinionModel = true
        return;
      } else {
        // 显示 点评model
        self.showOpinionModel = false
        // 进行评论
        self.proceedOpinion ()
      }
    },
    // 操作评论 --- 评论
    operateCommmentDiscuss (jobId, index) {
      let self = this;
      if(self.showField){
        // 显示输入框
        self.showField = false
        return;
      }
      // 作业 下标
      self.courseTaskIndex = index
        
      // 操作评论 --- 初始化
      self.operateCommmentInit()
      // 提示文本
      self.releaseText = '评论 '
      // 显示输入框
      self.showField = true
      // 评论 状态  0 -- 评论   1 -- 回复   2 -- 点评
      self.commentStatus = 0
      // 评论 数据包
      self.commentPacket = {
        job_id: jobId,
        to_uid: wx.getStorageSync('student_id'),
        from_id: wx.getStorageSync('student_id')
      }
  
    },
    // 操作评论 --- 回复
    operateCommmentReply (item, index) {
      let self = this;
      console.log(self.showField, '....显示输入框')
      if(self.showField){
        // 显示输入框
        self.showField = false
        return;
      }

      // 作业 下标
      self.courseTaskIndex = index
      // 操作评论 --- 初始化
      self.operateCommmentInit()
      // 判断 是 回复 or 删除
      if (wx.getStorageSync('student_id') !== item.to_uid) {
        // 提示文本
        self.releaseText = '回复 '
        // 显示输入框
        self.showField = true
        // 评论 状态  0 -- 评论   1 -- 回复   2 -- 点评
        self.commentStatus = 1
        // 评论 数据包
        self.commentPacket = {
          job_id: item.job_id,
          to_uid: wx.getStorageSync('student_id'),
          from_id: item.to_uid
        } 
      }else{
        wx.showActionSheet({
          itemList: ['删除'],
          itemColor: '#ee3a29',
          success: function(res) {
            console.log(res.tapIndex)
            if (res.tapIndex === 0){
              // 操作评论 --- 删除
              self.operateCommmentDelete(item)
            }
          },
          fail: function(res) {
            console.log(res.errMsg)
          }
        })
      }
      
    },
    // 操作点评 --- 回复
    operateOpinionReply (item, index) {
      let self = this;
      console.log(item, '.....操作点评 --- 回复')
      if (wx.getStorageSync('student_id') === item.teacher_id) {
        showMessager('不可回复自己的点评')
        return;
      }

      // 作业 下标
      self.courseTaskIndex = index
      // 操作评论 --- 初始化
      self.operateCommmentInit()
      // 提示文本
      self.releaseText = '回复 '
      // 显示输入框
      self.showField = true
      // 评论 状态  0 -- 评论   1 -- 回复   2 -- 点评
      self.commentStatus = 1
      // 评论 数据包
      self.commentPacket = {
        job_id: item.job_id,
        to_uid: wx.getStorageSync('student_id'),
        from_id: item.teacher_id
      } 
    },
    // 操作评论 --- 删除
    operateCommmentDelete (item) {
      let self = this;
      // 操作评论 --- 初始化
      self.operateCommmentInit()
      console.log(item, '操作评论 --- 删除')
      // 删除 评论 -- 内容
      self.cancelCommmentContent (item)
    },
    // 操作评论 --- 发布
    operateCommmentPublish () {
      let self = this;
      // 评论 文本
      if (self.commmentText) {
        // 评论 状态  0 -- 评论   1 -- 回复  2 -- 点评
        if (self.commentStatus === 0 || self.commentStatus === 1) {
          // 发布 评论 -- 内容
          self.publishCommmentContent ()
        }
        if (self.commentStatus === 2) {
          // 发布 评论 -- 点评
          self.publishOpinion ()
        }
        
      }else{
        // 评论 状态  0 -- 评论   1 -- 回复  2 -- 点评
        if (self.commentStatus === 1) {
          showMessager('请填写回复内容')
        }else if(self.commentStatus === 2){
          showMessager('请填写点评内容')
        }else{
          showMessager('请填写评论内容')
        }
      }
    },
    // 监听 输入框 获取聚焦 状态
    monitorCommmentFocus (e) {
      let self = this;
      const keyboard =  e.mp.detail.height
      // console.log(e, '.....监听 输入框 获取聚焦 状态')
      // self.keyboardHeight = keyboard
      wx.getSystemInfo({
        success(res) {
          // 键盘高度   - keyboard + self.inputboxHeight
          self.keyboardHeight = res.windowHeight
          console.log(keyboard, res.windowHeight, self.keyboardHeight, '监听 输入框聚焦 状态')
        }
      });
      
      // setTimeout(() => {
      //   // 聚焦
      //   self.spotlight = true
      // }, 500)
      
    },
    // 监听 输入框 失去聚焦 状态
    monitorCommmentBlur () {
      console.log('监听 输入框 失去聚焦 状态')
      let self = this;

      // 显示输入框
      self.showField = false

      // // 键盘高度
      // // self.keyboardHeight = 0
      // // 拉高底部
      // self.pulledBottom = false
    },

    // 跳转到 编辑作业界面
    async goToCommentJob(e) {
      let self = this;
      if (wx.getStorageSync("student_id")) {
        // 判断是否重复提交
        const redoInfo = await judgeTaskRepetition(self.$root.$mp.query.section_id, wx.getStorageSync("student_id"))
        console.log(redoInfo, '.........redoInfo')
        if (redoInfo.status === 200) {
          wx.navigateTo({
            url: '../sendJob/main?section_id='+self.$root.$mp.query.section_id
          })
        }else {
          showMessager(redoInfo.msg)
        }
      }
      // 用户信息数据
      const userData = wx.getStorageSync('userInfo')
      // // 保存用户点击的formid
      // const formState = await saveStudentFormId(userData.openId, e.target.formId)
    },
    // 跳转到 作业详情页
    goToTaskParticulars (item) {
      let self = this;
      console.log(item, '跳转到 作业详情页')
      if (item && !self.showField) {
        wx.navigateTo({
          url: '../taskParticulars/main?task_state=1&job_id='+item.job_id
        })
      } else {
        // 操作评论 --- 初始化
          self.operateCommmentInit()
      }
    }
  },
  // 滚动界面
  onPageScroll (res) {
    let self = this;
    console.log('滚动界面 comment', self.scroollHideInput, self.showField)
    // // 聚焦
    // if (self.spotlight) {
      // // 操作评论 --- 初始化
      // self.operateCommmentInit()
    // }
    // console.log(self.spotlight, '........聚焦')

    // console.log(self.hiddenInput, '....滚动界面')
  },
  // // 分享
  // onShareAppMessage (res) {
  //   console.log(res, '...........分享......')
  //   // if (res.from === 'button') {
  //   //   // 来自页面内转发按钮
  //   //   console.log(res.target)
  //   // }
  //   // return {
  //   //   title: '自定义转发标题',
  //   //   path: '/page/user?id=123'
  //   // }
  // }
}
</script>

<style lang="less" scoped>
.commmentList{
    width: 100%;
    background: #ffffff;
    form {
      margin: 0 auto;
      width: 100%;
      height: 100%;
      .form-btn {
          width: 100%;
          height: 100%;
          border:none;
          text-align:left;
          padding:0;
          margin:0;
          background-color: transparent;
          &::after {
              border: none;
          }
      }
    }
    .commentCell{
      // margin-bottom: 25rpx;
      padding: 25rpx 32rpx 25rpx 32rpx;
      border-top: 1rpx solid #EAEAEA;
      &:first-child{
        border-top: none;
      }
      .cellLeft{
        display: inline-block;
        vertical-align: top;
        .cellIcon{
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 20rpx;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
      .cellRight{
        display: inline-block;
        vertical-align: top;
        width: 586rpx;
        padding-top: 10rpx;
        .cellName{
          font-family: PingFangSC-Medium;
          font-size: 30rpx;
          color: #666666;
          letter-spacing: 0.61px;
          line-height: 1;
          // height: 42rpx;
          // line-height: 42rpx;
          width: 80%;
          white-space: nowrap;
          overflow: hidden;
          /* 文本超出变省略号 */
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }
        .cellTime{
          font-family: PingFangSC-Regular;
          font-size: 22rpx;
          color: #999999;
          letter-spacing: 0.7rpx;
          line-height: 1;
          margin-top: 13rpx;
          // height: 30rpx;
          // line-height: 30rpx;
        }
        .cellContent{
          .contentText{
            font-family: PingFangSC-Regular;
            font-size: 30rpx;
            color: #333333;
            letter-spacing: 0.61rpx;
            line-height: 42rpx;
            margin-top: 20rpx;
          }
          .contentMedia{
            height: 188rpx;
            overflow: hidden;
            white-space: nowrap;
            margin-top: 20rpx;
            .mediaList {
              font-size: 0;
              .mediaCell {
                  display: inline-block;
                  width: 188rpx;
                  height: 188rpx;
                  position: relative;
                  border-radius: 10rpx;
                  background-repeat: no-repeat;
                  background-position: center center;
                  background-size: cover;
                  // position: relative;
                  & + .mediaCell {
                      margin-left: 10rpx;
                  }
                  .time {
                      position: absolute;
                      bottom: 0;
                      width: 100%;
                      font-family: PingFangSC-Light;
                      font-size: 24rpx;
                      color: #ffffff;
                      text-align: center;
                  }
                  .videoBtn{
                    position: absolute;
                    width: 80rpx;
                    height: 80rpx;
                    line-height: 80rpx;
                    top: 54rpx;
                    left: 54rpx;
                    img{
                      width: 100%;
                      height: 100%;
                    }
                  }
              }
            }
          }
          .contentVideo{
            width: 400rpx;
            height: 230rpx;
            margin-top: 20rpx;
            .videoBox{
              width: 100%;
              height: 100%;
              position: relative;
              video{
                width: 100%;
                height: 100%;
              }
              img{
                width: 100%;
                height: 100%;
              }
              .videoBtn{
                position: absolute;
                width: 80rpx;
                height: 80rpx;
                line-height: 80rpx;
                top: 75rpx;
                left: 160rpx;
                img{
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
          .contentAudio{
            width: 586rpx;
            height: 120rpx;
            margin-top: 28rpx;
          }
        }

        .cellDiscuss{
          .discussButton{
            line-height: 1;
            padding-top: 20rpx;
            padding-bottom: 25rpx;
            display: inline-block;
            vertical-align: middle;
            margin-right: 22rpx;
            .discussIcon{
              display: inline-block;
              vertical-align: middle;
              width: 22.1rpx;
              height: 20.9rpx;
              line-height: 20.9rpx;
              // margin-right: 9.1rpx;
              img{
                width: 100%;
                height: 100%;
                display: block;
              }
            }
            .discussText{
              display: inline-block;
              vertical-align: middle;
              font-family: PingFangSC-Regular;
              font-size: 22rpx;
              color: #666666;
              letter-spacing: 0.67rpx;
              line-height: 1;
              margin-left: 9.1rpx;
            }
          }

          .opinionButton{
            line-height: 1;
            padding-top: 20rpx;
            padding-bottom: 25rpx;
            display: inline-block;
            vertical-align: middle;
            // margin-right: 22rpx;
            .opinionIcon{
              display: inline-block;
              vertical-align: middle;
              width: 18rpx;
              height: 23rpx;
              line-height: 23rpx;
              // margin-right: 9.1rpx;
              img{
                width: 100%;
                height: 100%;
                display: block;
              }
            }
            .opinionText{
              display: inline-block;
              vertical-align: middle;
              font-family: PingFangSC-Regular;
              font-size: 22rpx;
              color: #666666;
              letter-spacing: 0.67rpx;
              line-height: 1;
              margin-left: 8rpx;
            }
          }

          .shareButton{
            line-height: 1;
            padding-top: 20rpx;
            padding-bottom: 25rpx;
            display: inline-block;
            vertical-align: middle;
            .shareIcon{
              display: inline-block;
              vertical-align: middle;
              width: 22rpx;
              height: 21rpx;
              line-height: 21rpx;
              // margin-right: 9.1rpx;
              img{
                width: 100%;
                height: 100%;
                display: block;
              }
            }
            .shareText{
              display: inline-block;
              vertical-align: middle;
              font-family: PingFangSC-Regular;
              font-size: 22rpx;
              color: #666666;
              letter-spacing: 0.67rpx;
              line-height: 1;
              margin-left: 9.1rpx;
            }
          }
          .teacherReviews{
            font-family: PingFangSC-Regular;
            font-size: 26rpx;
            color: #999999;
            letter-spacing: 0.91rpx;
            line-height: 40rpx;
            background: rgba(255,180,151,0.20);
            border: 1rpx solid rgba(254,122,114,0.30);
            border-radius: 4rpx;
            padding: 20rpx;
            .teacherName{
              font-family: PingFangSC-Regular;
              font-size: 26rpx;
              color: #446191;
              letter-spacing: 1.29rpx;
              margin-right:5px;
            }
            .reviewsText{
              font-family: PingFangSC-Regular;
              font-size: 26rpx;
              color: #EBA844;
              letter-spacing: 1.29rpx;
            }
          }
          .commentContent{
            margin-top: 20rpx;
            background: #F5F5F5;
            padding: 20rpx;
            .commentLine{
              margin-top: 8rpx;
              div{
                font-family: PingFangSC-Regular;
                font-size: 26rpx;
                color: #151515;
                letter-spacing: 0.53rpx;
                line-height: 37rpx;
                span{
                  font-family: PingFangSC-Regular;
                  font-size: 26rpx;
                  color: #446191;
                  letter-spacing: 0.53rpx;
                }
              }
              .discussLine{}
              .replyLine{}
            }
          }
        }
      }
    }
    .commentJob{
      position:fixed;
      z-index:888;
      right:32rpx;
      bottom:80rpx;
      width:70rpx;
      height:70rpx;
      border-radius:50%;
      overflow:hidden;
      background-image: linear-gradient(-180deg, #FFB497 0%, #FE7A72 100%);
      box-shadow: 1rpx 2rpx 6rpx 0 rgba(254,122,114,0.50);
      img{
        width: 100%;
        height: 100%;
      }
    }
    .commentRelease{
      display: flex;
      // align-items: flex-end; /*底部对齐*/
      align-items: center;
      justify-content: space-between; /*两端对齐*/
      box-sizing: border-box;
      position: fixed;
      left: 0;

      bottom: 0;

      width: 100%;
      padding: 18rpx 0 18rpx 30rpx;
      background-color: #F7F8F7;
      font-size: 28rpx;
      z-index: 99999999999999999999999;
      .text{
        width: 604rpx;
        height: 20rpx;
        // min-height: 34rpx;
        // max-height: 102rpx; /*最多显示三行*/
        // border-width: 15rpx 20rpx; /*使用padding与预期留白不一致，故使用border*/
        border-style: solid;
        border-color:  #ffffff;
        line-height: 20rpx;
        font-size: 28rpx;
        background-color: #ffffff;
        border-radius: 4rpx;
      }
      .submit{
          width: 116rpx;
          height: 20rpx;
          line-height: 20rpx;
          text-align: center;
          color: #66CC00;
          padding: 15rpx 20rpx; /*使用padding与预期留白不一致，故使用border*/
      }
      .input_null{
          color: #C9C9C9;
      }
    }

  .opinionModel{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 999999999999;
    .opinionMask{
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: #000;
      opacity: 0.7;
    }
    .opinionContent{
      position: fixed;
      top: 50%;
      left: 50%;
      margin-top: -104rpx;
      margin-left: -270rpx;
      width: 540rpx;
      height: 208rpx;
      background: #FFFFFF;
      border-radius: 24rpx;
      text-align: center;
      .opinionTitle{
        font-family: PingFangSC-Regular;
        font-size: 34rpx;
        color: #333333;
        letter-spacing: -0.82rpx;
        height: 120rpx;
        line-height: 120rpx;
        // border-bottom: 2rpx solid #CCCCCC;
        background: #FFFFFF;
      }
      .opinionSpace{
        width: 100%;
        height: 1rpx;
        background: #CCCCCC;
      }
      .opinionDivide{
        font-family: PingFangSC-Regular;
        font-size: 34rpx;
        color: #666666;
        letter-spacing: -0.82rpx;  
        line-height: 1;
        background: #FFFFFF;
        width: 100%;
        .cancelDivide{
          display: inline-block;
          vertical-align: middle;
          width: 270rpx;
          text-align: center;
          height: 87rpx;
          line-height: 87rpx;
        }
        .divideSpace{
          display: inline-block;
          vertical-align: middle;
          width: 1rpx;
          // height: 100%;
          background: #CCCCCC;
          height: 87rpx;
          line-height: 87rpx;
        }
        .ensureDivide{
          display: inline-block;
          vertical-align: middle;
          color: #09BB07;
          width: 269rpx;
          text-align: center;
          height: 87rpx;
          line-height: 87rpx;
        }
      }
    }
  }  
}
</style>

